<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <meta name="viewpot" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>vue实现购物车功能</title>
        <script src='/2031vue-master/js/vue.js'></script>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            #container {
                margin: 0 auto;
                width:60%;
                margin-top:10px;
            }
            .boxOne {
                width:100%;
                height:40px;
                border:1px solid #000;
                box-sizing: border-box;
                position: relative;
            }
            #goods tr{
                height:35px;
            }
            #goods tr>th{
                background-color: #0094ff;
                font-size:16px;
            }
            .boxOne span {
                position: absolute;
                top:50%;
                left:0;
                transform: translate(0,-50%);
            }
            #goods {
                border-collapse:collapse;
                border: 1px solid #000;
                text-align: center;
                width:100%;
                margin-top:10px;
            }
            th, td {
                border-collapse:collapse;
                border: 1px solid #000;
            }
            #addGood {
                padding: 0 5px;
            }
            #searchTag {
                margin-top: 10px;
            }
        </style>
    </head>
    <body>
        <div id="shop">
            <div id="container">
                <div id="addTag" class="boxOne">
                    <span>
                        <label for="add">品牌名称：</label>
                        <input type="text" id="add" v-model="goodName">
                        <button id="addGood" @click="addGoods">添加</button>
                    </span> 
                </div>

                <div id="searchTag" class="boxOne">
                    <span>
                        <label for="search">品牌名称：</label>
                        <input type="text" id="search" placeholder="请输入搜索商品" v-model="findGoodName">
                        <input type="submit" @click="getGoodList" value="搜索">
                    </span>
                </div>
                <table id="goods">
                    <thead>
                        <tr>
                            <th>编号</th>
                            <th>品牌名称</th>
                            <th>创立时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(value, index) in goodList" :id="index">
                            <td>{{ index + 1 }}</td>
                            <td>{{value.name}}</td>
                            <td>{{value.createtime}}</td>
                            <td><a href="#" @click="deleteGood($event)" style="color:blue;text-decoration: underline;">删除</a></td>
                        </tr>
                        <tr v-if='goodList.length===0'>
                            <td colspan="4">没有品牌数据</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <script>
            var vm = new Vue({
                el:'#shop',
                data:{
                    goodList:[
                        {name:"欧美", createtime:"2022-12-01 21:14:32"},
                        {name:"日韩", createtime:"2022-12-01 21:14:32"},
                        {name:"大陆", createtime:"2022-12-01 21:14:32"},
                    ],
                    show: true,
                    goodName: '',
                    findGoodName: '',
                },
                methods:{
                    addGoods(){
                        var goodObj = new Object();
                        goodObj.name = this.goodName;
                        var current_time = new Date();
                        year = current_time.getFullYear()
                        month = current_time.getMonth() < 10 ? '0' + current_time.getMonth() : current_time.getMonth()
                        day = current_time.getDay() < 10 ? '0' + current_time.getDay() : current_time.getDay()
                        hour = current_time.getHours()
                        minute = current_time.getMinutes()
                        second = current_time.getSeconds()
                        goodObj.createtime = year + '-' + month + '-' + day  + ' ' + hour + ':' + minute + ':' + second;
                        this.goodList.push(goodObj);
                    },
                    deleteGood(event){
                        if(confirm("是否删除?")){
                            this.goodList.splice(event.data, 1)
                        }
                    },
                    getGoodList(){
                        var tarGoodName = this.findGoodName;
                        console.log(this.findGoodName);
                        var tempGoodList = new Array();
                        for(good of this.goodList){
                            console.log(good)
                            if(good.name==tarGoodName){
                                tempGoodList.push(good)
                            }
                        }
                        this.goodList = tempGoodList;
                    }
                },
                filters:{
                    timeFilter(time){
                        console.log(time, typeof(time))
                    }
                }
            })
        </script>
    </body>
</html>